<template>
  <div style="width: 99%;height: 99%;">
    <div class="top">
      <el-row class="header1">
        <span>天然气</span>
        <el-button style="float: right;margin-right: 4vh;" type="primary" @click="save">保存</el-button>
      </el-row>
      <el-row class="form">
        <el-form ref="form1" :model="form1" :inline="true" style="float: left;">
          <el-form-item label="热值:">
            <label slot="label" style="color: white;">热值:</label>
            <el-input v-model="form1.value">
              <i slot="suffix" style="font-style:normal;margin-right: 10px;">kj/Nm3</i>
            </el-input>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row class="title">
        <span>价格(元/m3):</span>
      </el-row>
      <el-row class="table">
        <table>
          <tr>
            <th>1月</th>
            <th>2月</th>
            <th>3月</th>
            <th>4月</th>
            <th>5月</th>
            <th>6月</th>
            <th>7月</th>
            <th>8月</th>
            <th>9月</th>
            <th>10月</th>
            <th>11月</th>
            <th>12月</th>
          </tr>
          <tr>
            <td><input v-model="table1.month1" placeholder="- -"></td>
            <td><input v-model="table1.month2" placeholder="- -"></td>
            <td><input v-model="table1.month3" placeholder="- -"></td>
            <td><input v-model="table1.month4" placeholder="- -"></td>
            <td><input v-model="table1.month5" placeholder="- -"></td>
            <td><input v-model="table1.month6" placeholder="- -"></td>
            <td><input v-model="table1.month7" placeholder="- -"></td>
            <td><input v-model="table1.month8" placeholder="- -"></td>
            <td><input v-model="table1.month9" placeholder="- -"></td>
            <td><input v-model="table1.month10" placeholder="- -"></td>
            <td><input v-model="table1.month11" placeholder="- -"></td>
            <td><input v-model="table1.month12" placeholder="- -"></td>
          </tr>
        </table>
      </el-row>
    </div>

    <div class="down">
      <el-row class="header2">
        <span>沼气</span>
      </el-row>
      <el-row class="form">
        <el-form ref="form1" :model="form2" :inline="true" style="float: left;">
          <el-form-item label="热值:">
            <label slot="label" style="color: white;">热值:</label>
            <el-input v-model="form2.value">
              <i slot="suffix" style="font-style:normal;margin-right: 10px;">kj/Nm3</i>
            </el-input>
          </el-form-item>
          <el-form-item label="日产量:">
            <label slot="label" style="color: white;">日产量:</label>
            <el-input v-model="form2.output">
              <i slot="suffix" style="font-style:normal;margin-right: 10px;">m3</i>
            </el-input>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row class="title">
        <span>价格(元/m3):</span>
      </el-row>
      <el-row class="table">
        <table>
          <tr>
            <th>1月</th>
            <th>2月</th>
            <th>3月</th>
            <th>4月</th>
            <th>5月</th>
            <th>6月</th>
            <th>7月</th>
            <th>8月</th>
            <th>9月</th>
            <th>10月</th>
            <th>11月</th>
            <th>12月</th>
          </tr>
          <tr>
            <td><input v-model="table2.month1" placeholder="- -"></td>
            <td><input v-model="table2.month2" placeholder="- -"></td>
            <td><input v-model="table2.month3" placeholder="- -"></td>
            <td><input v-model="table2.month4" placeholder="- -"></td>
            <td><input v-model="table2.month5" placeholder="- -"></td>
            <td><input v-model="table2.month6" placeholder="- -"></td>
            <td><input v-model="table2.month7" placeholder="- -"></td>
            <td><input v-model="table2.month8" placeholder="- -"></td>
            <td><input v-model="table2.month9" placeholder="- -"></td>
            <td><input v-model="table2.month10" placeholder="- -"></td>
            <td><input v-model="table2.month11" placeholder="- -"></td>
            <td><input v-model="table2.month12" placeholder="- -"></td>
          </tr>
        </table>
      </el-row>

    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        table1: [{
          month1: '',
          month2: '',
          month3: '',
          month4: '',
          month5: '',
          month6: '',
          month7: '',
          month8: '',
          month9: '',
          month10: '',
          month11: '',
          month12: ''
        }],
        form1: {
          value: '',
          output: ''
        },
        table2: [{
          month1: '',
          month2: '',
          month3: '',
          month4: '',
          month5: '',
          month6: '',
          month7: '',
          month8: '',
          month9: '',
          month10: '',
          month11: '',
          month12: ''
        }],
        form2: {
          value: '',
          output: ''
        },
        project_id: this.$root.project_id
      }
    },
    methods: {
      save() {
        console.log(this.project_id);
        this.$http.post('/iepsapi/resource/saveGas',
          [{
              project_id: this.project_id,
              name: '天然气',
              type: '01',
              value: this.form1.value,
              day_output: this.form1.output,
              month1: this.table1.month1,
              month3: this.table1.month3,
              month2: this.table1.month2,
              month4: this.table1.month4,
              month5: this.table1.month5,
              month6: this.table1.month6,
              month7: this.table1.month7,
              month8: this.table1.month8,
              month9: this.table1.month9,
              month10: this.table1.month10,
              month11: this.table1.month11,
              month12: this.table1.month12
            },
            {
              project_id: this.project_id,
              name: '沼气',
              type: '02',
              value: this.form2.value,
              day_output: this.form2.output,
              month1: this.table2.month1,
              month2: this.table2.month2,
              month3: this.table2.month3,
              month4: this.table2.month4,
              month5: this.table2.month5,
              month6: this.table2.month6,
              month7: this.table2.month7,
              month8: this.table2.month8,
              month9: this.table2.month9,
              month10: this.table2.month10,
              month11: this.table2.month11,
              month12: this.table2.month12
            }
          ]
        ).then((res) => {
          console.log(res);

          if (res.data.flag) {
            this.$message({
              type: 'success',
              message: res.data.message
            });
          } else {
            this.$message.error(res.data.message);
          }
        }).catch((error) => {
          console.log(error);
        });
      }
    }
  }
</script>

<style scoped="scoped">
  .top {
    width: 100%;
    height: 45%;
    float: left;
    margin-left: 1vh;
    margin-top: 1vh;
    text-align: left;
  }

  .down {
    width: 100%;
    height: 45%;
    float: left;
    margin-left: 1vh;
    margin-top: 1vh;
    text-align: left;
  }

  .header1 {
    padding: 15px 20px 10px;
    color: #FFF;
    background: #374590;
    text-align: left;
  }

  .header2 {
    padding: 20px 20px 20px;
    color: #FFF;
    background: #374590;
    text-align: left;
  }

  .form {
    padding: 30px 20px 10px;
  }

  .title {
    padding: 0px 20px 20px;
    text-align: left;
  }

  table {
    margin-left: 2vh;
    width: 99%;
    height: 15vh;
  }

  th {
    text-align: center;
    background: #374590;
  }

  td {
    text-align: center;
  }

  input {
    text-align: center;
    background: none;
    width: 90%;
    height: 80%;
    color: white;
    margin-left: 2vh;
    border: none;
  }

  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    color: #fff;
    font-size: 16px;
  }

  input:-moz-placeholder,
  textarea:-moz-placeholder {
    color: #fff;
    font-size: 16px;
  }

  input::-moz-placeholder,
  textarea::-moz-placeholder {
    color: #fff;
    font-size: 16px;
  }

  input:-ms-input-placeholder,
  textarea:-ms-input-placeholder {
    color: #fff;
    font-size: 16px;
  }

  /deep/ .el-input.is-disabled .el-input__inner {
    background-color: #161E43;
    border-color: #161E43;
    color: #FFFFFF;
    text-align: left;
    cursor: not-allowed;
  }

  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #FFFFFF;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;
  }
</style>
